<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="1.png">
  <title>Document</title>
  <style>
    body {
      background: url(https://img.zcool.cn/community/012b9b597996f7a8012193a30cd697.jpg@1280w_1l_2o_100sh.jpg) no-repeat;
      background-size: cover;
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }
    #app {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 800px;
      height: 600px;
      /* background: #000; */
      background: url(https://img.zcool.cn/community/012b9b597996f7a8012193a30cd697.jpg@1280w_1l_2o_100sh.jpg) no-repeat;
      background-size: cover;
      margin: 75px auto;
		  position:relative;
    }
    #ball {
      width: 80px;
      height: 80px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 998;
    }
    #yellow {
      width: 150px;
      height: 20px;
      background: linear-gradient(225deg, #5bc6ff, #4da7db);
      box-shadow:  -20px 20px 60px #489dcf, 
                  20px -20px 60px #62d5ff;
      border-radius: 20px;
      position: absolute;
      bottom: 40px;
      left: 0;
    }
    .score {
      width: 150px;
      height: 20px;
      background: rgba(0, 0, 0, .3);
      border-radius: 20px;
      border: 2px solid #aaa;
      position: absolute;
      top:10px;
      right:20px;
      color: #fff;
      text-align: center;
      line-height: 20px;
      font-weight: 700;
    }
    #startface {
      width: 800px;
      height: 600px;
      position: absolute;
      display: block;
      z-index: 999;
      background: rgba(0,0,0,.5);
      text-align: center;
      color: #fff;
    }
    .button {
      width: 200px;
      height: 80px;
      margin: 10px auto;
      background: url(./btn.png) no-repeat;
      background-size: 200px 80px;
      line-height: 80px;
      text-align: center;
      font-size: 24px;
      color: #fff;
      cursor: pointer;
      border: 0;
    }
    .face {
      width: 600px;
      height: 400px;
      background: url(./bg.jfif) no-repeat;
      background-size: contain;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
    }
    .logo {
      font-size: 55px;
      margin: 55px;
    }
    .logo_ball {
      width: 50px;
    }
    #endface h1 {font-weight: 400;}
    #endscore {font-size: 40px;font-weight: 700;}
    #method span {margin: 5px 0; font-size: 16px;}
  </style>
</head>
<body>
  <div id="app">
    <div id="startface">
      <div class="logo">
        <img src="./1.png" class="logo_ball" />
        弹<span style="color: #489dcf;">球球</span>小游戏
        <img src="./1.png" class="logo_ball" />
      </div>
      <div id="startBtn" onclick="startGame.call(this)" class="button">开始游戏</div>
      <div class="button" onclick="getmethod()">玩法介绍</div>
      <div class="button" onclick="getlist()">排行榜</div>
      <div class="button" onclick="getauthor()">作者</div>
    </div>
    <div class="face" id="endface" style="display: none;">
      <h1>结算页面</h1>
      <span>你得到的分数为：</span>
      <h1 id="endscore">0</h1>
      <span>请输入你的名字</span>
      <input type="text" id="name" required>
      <div class="button" onclick="submitscore()" style="margin: 10px 0 -20px;">提交分数</div>
      <div class="button" onclick="goback()">返回</div>
    </div>
    <div class="face" id="method" style="display: none;">
      <h1>玩法介绍</h1>
      <span>利用方块碰击小球反弹</span>
      <span>每次碰击加100分</span>
      <span>每加300分</span>
      <span>小球速度加快</span>
      <span>同时方块变小</span>
      <span>最后小球落入底部</span>
      <span>游戏结束</span>
      <div class="button" onclick="goback()">返回</div>
    </div>
    <div class="face" id="list"  style="display: none;">
      <h1>排行榜</h1>
      <span>第一名······················<span id="item">还没有人在这里哦</span></span>
      <span>第二名······················<span id="item">还没有人在这里哦</span></span>
      <span>第三名······················<span id="item">还没有人在这里哦</span></span>
      <span>第四名······················<span id="item">还没有人在这里哦</span></span>
      <span>第五名······················<span id="item">还没有人在这里哦</span></span>
      <span>第六名······················<span id="item">还没有人在这里哦</span></span>
      <span>第七名······················<span id="item">还没有人在这里哦</span></span>
      <span>第八名······················<span id="item">还没有人在这里哦</span></span>
      <div class="button" onclick="goback()">返回</div>
    </div>
    <div class="face" id="author" style="display: none;">
      <h1>作者</h1>
      <h2>纪晓泰</h2>
      <span>广东省梅州市 嘉应大学 计算机学院</span>
      <span>联系方式：jirtayo（微信）</span>
      <div class="button" onclick="goback()">返回</div>
    </div>
    <img src="./1.png" id="ball">
    <div id="yellow"></div>
    <div class="score">0</div>
  </div>
  <script src="./main.js"></script>
</body>
</html>
